<template>
  <div>
    <div class="searchDiv">
      <el-input placeholder="请输入商品名称关键字" v-model="query" clearable>
        <el-button slot="append" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </el-input>
    </div>
    <div class="topCard">
      <el-card class="card1">
        <div v-if="curDiv">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in 3" :key="item">
              <img src="@/assets/logo.png" alt="Logo" width="100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else>
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item, index) in itemData.subImages.split(',')" :key="index">
              <img src="@/assets/logo.png" v-real-img="realImg(item)" width="100%" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-card>
      <el-card class="card2">
        <el-row class="text">
          <el-col>{{itemData.name}}</el-col>
        </el-row>
        <el-row>
          <el-col>{{itemData.subtitle}}</el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="8">价格</el-col>
          <el-col :span="10">{{itemData.price}}</el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="8">库存</el-col>
          <el-col :span="10">{{itemData.stock}}</el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="8">购买数量</el-col>
          <el-col :span="10">
            <el-input-number :min="1" :max="itemData.stock" v-model="buyNum"></el-input-number>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col>
            <el-button
              type="primary"
              @click="addProduct"
              :disabled="flag || itemData.stock < this.buyNum"
            >添加到购物车</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="bottomCard">
      <el-card class="card3">
        <div class="ql-container ql-snow">
          <div class="ql-editor">
            <div v-html="itemData.detail"></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: '',
      id: 0,
      itemData: {},
      buyNum: 0,
      curDiv: true,
      flag: false
    }
  },
  created() {
    this.id = this.$route.query.id
    this.getProductDetail()
  },
  methods: {
    search() {
      const routeData = this.$router.resolve({
        path: '/productList',
        query: {
          query: this.query
        }
      })
      window.open(routeData.href, '_blank')
    },
    async getProductDetail() {
      const { data: res } = await this.$axios.get('manage/product/get_goods_detail/' + this.id)
      if (res.status !== 0) {
        this.flag = true
        this.$message.error(res.msg)
        return
      }
      this.itemData = res.data
      this.curDiv = this.itemData.subImages === null ? true : this.itemData.subImages.split(',').length === 0
    },
    realImg(item) {
      if (this.itemData.mainImage === null) {
        return 'false'
      }
      return this.itemData.imageHost + item
    },
    async addProduct() {
      const info = new FormData()
      info.append('id', this.itemData.id)
      info.append('count', this.buyNum)
      const { data: res } = await this.$axios.put('manage/cart/add', info)
      if (res.status !== 0) return this.$message.error(res.msg)
      this.$message.success('购物车成功添加' + this.buyNum + '件商品！')
    }
  }
}
</script>

<style lang="less" scoped>
.searchDiv {
  display: flex;
  justify-content: center;
  .el-input {
    width: 500px;
  }
}

.el-card {
  margin-top: 20px;
}

.topCard {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .card1 {
    width: 445px;
    display: inline-block;
  }

  .card2 {
    width: 445px;
    display: inline-flex;
    align-items: center;
    height: 270px;
    .text {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.bottomCard {
  display: flex;
  justify-content: center;
  .card3 {
    width: 900px;
  }
}
</style>
